<template>
  <div class='container-directorys'>
    <el-card>
      <!-- 面包屑导航 -->
      <el-breadcrumb
        class="breadcrumba"
        separator-class="el-icon-arrow-right"
        v-if="subjectsdata.id && subjectsdata.name"
      >
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ subjectsdata.id ? subjectsdata.name : '' }}
        </el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 头部 -->
      <el-row>
        <el-col :span="18">
          <!-- 表单 -->
          <el-form
            ref="add"
            :model='formData'
            label-width="80px"
            inline
          >
            <!-- 目录名称 -->
            <el-form-item
              prop='directoryName'
              label="目录名称"
            >
              <el-input
                v-model="formData.directoryName"
                placeholder="搜索关键字"
              ></el-input>
            </el-form-item>
            <!-- 状态 -->
            <el-form-item
              label="状态"
              prop='state'
            >
              <el-select
                v-model="formData.state"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 按钮 -->
            <el-form-item>
              <el-button
                @click="btnClear"
                size='small'
              >清除</el-button>
              <el-button
                size='small'
                type="primary"
                @click="btnSearch"
              >搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-row
            type="flex"
            justify="end"
          >
            <el-button
              class="colright"
              v-if="subjectsdata.id && subjectsdata.name"
              size='small'
              type="text"
              icon="el-icon-back"
              @click="$router.back()"
            >返回学科</el-button>
            <el-button
              class="colright"
              size='small'
              type="success"
              icon="el-icon-edit"
              @click="showDialog = true"
            >新增目录</el-button>
          </el-row>
        </el-col>
      </el-row>

      <!-- alert提示 -->
      <el-alert
        :title="`数据一共 ${total} 条`"
        type="info"
        show-icon
        :closable='false'
      >
      </el-alert>

      <!-- 大表格 -->
      <el-table
        class="t"
        border
        :data='tableData'
      >
        <el-table-column
          width="80"
          label="序号"
          type="index"
        />
        <el-table-column
          label="所属学科"
          prop="subjectName"
        />
        <el-table-column
          label="目录名称"
          prop="directoryName"
        >
        </el-table-column>
        <el-table-column
          width="120"
          label="创建者"
          prop="username"
        />
        <el-table-column
          width="200"
          label="创建日期"
        >
          <template slot-scope="scope">
            {{scope.row.addDate | parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column
          label="面试题数量"
          prop="totals"
        />
        <el-table-column
          label="状态"
          align="center"
        >
          <template slot-scope="scope">
            {{scope.row.state === 1 ? '已启用' : '已禁用'}}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="200"
        >
          <template slot-scope="scope">
            <el-button
              :underline='false'
              type="text"
              @click="handleStatus(scope.row)"
            >
              <span v-if="scope.row.state === 0">启用</span>
              <span v-else>禁用</span>
            </el-button>
            <el-button
              v-if="scope.row.status !== 'deleted' "
              :disabled='scope.row.state == 1'
              type="text"
              :underline='false'
              @click="editUpdate(scope.row)"
            >修改</el-button>
            <el-button
              v-if="scope.row.status !== 'deleted' "
              :disabled='scope.row.state == 1'
              type="text"
              :underline='false'
              @click="delRemove(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-row
        class="pager"
        type="flex"
        justify="center"
        align="middle"
        style="height: 40px"
      >
        <el-pagination
          layout="prev, pager, next,sizes, jumper"
          :total="total"
          :page-size="formData.pagesize"
          :current-page="formData.page"
          @current-change='changePager'
          :page-sizes='[5,10,20,50]'
          @size-change='changeSize'
        >
        </el-pagination>
      </el-row>
    </el-card>

    <!-- 放置一个弹层 -->
    <el-dialog
      :title="`${showText}`"
      width='440px'
      :visible="showDialog"
      @close="btnCancel"
    >
      <el-form
        ref="permForm"
        :model="permForm"
        :rules="rules"
      >
        <el-form-item
          v-if="!subjectsdata.id && !subjectsdata.name"
          label="所属学科"
          prop="subjectID"
        >
          <el-select
            style="width:80%"
            placeholder="请选择"
            v-model="permForm.subjectID"
          >

            <el-option
              v-for="item in subjects"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="目录名称"
          prop="directoryName"
        >
          <el-input
            v-model="permForm.directoryName"
            style="width:80%"
          />
        </el-form-item>
        <el-form-item>
          <el-row
            type="flex"
            justify="end"
          >
            <!-- 列被分为24 -->

            <el-col :span="8">
              <el-button
                size="small"
                @click="btnCancel"
              >取消</el-button>
              <el-button
                type="primary"
                size="small"
                @click="btnOK"
              >确定</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// 目录列表API
import { list, add, update, remove, changeState } from '@/api/hmmm/directorys'
import { simple } from '@/api/hmmm/subjects.js'
import { status } from '@/api/hmmm/constants'
export default {
  name: 'Directorys',
  data () {
    return {
      infoId: '',
      // 筛选参数
      formData: {
        directoryName: '',
        page: 1,
        pagesize: 10
      },
      // 接收表格参数
      tableData: [
        {
          id: '',
          subjectName: '',
          directoryName: '',
          creator: '',
          addDate: '',
          totals: '',
          state: ''
        }
      ],
      total: 0,
      status,
      showDialog: false,

      // 弹层表单
      permForm: {
        subjectID: '',
        directoryName: ''
      },
      rules: {
        subjectID: [{ required: true, message: '请选择所属学科', trigger: 'blur' }],
        directoryName: [{ required: true, message: '请输入目录名称', trigger: 'blur' }]
      },
      // 简单学科列表
      subjects: []
    }
  },
  computed: {
    showText () {
      return this.permForm.id ? '修改目录' : '新增目录'
    },
    // 获取地址栏数据
    subjectsdata () {
      return this.$route.query || null
    }

  },
  // 侦听地址栏数据
  watch: {
    '$route.query' () {
      this.getTableData()
    }
  },
  created () {
    this.getTableData()
    this.getSubjects()
  },
  methods: {
    // 获取目录列表
    async getTableData () {
      this.formData.subjectID = this.subjectsdata.id || null
      const { data } = await list(this.formData)
      // console.log(res)
      // console.log(data)
      this.tableData = data.items
      this.total = data.counts
    },

    // 分页
    changePager (newPage) {
      this.formData.page = newPage
      this.getTableData()
    },
    // 尺码
    changeSize (newSize) {
      this.formData.page = 1
      this.formData.pagesize = newSize
      this.getTableData()
    },

    // 清除按钮
    btnClear () {
      this.tableData = {
        directoryName: null
      }
      this.$refs.add.resetFields()
    },
    // 搜索按钮
    btnSearch () {
      this.tableData.page = 1
      this.getTableData()
    },

    // 启用禁用按钮切换
    async handleStatus (row) {
      // console.log(row)
      // console.log('-----------------')
      try {
        await changeState({
          id: row.id, state: row.state
        })
        // console.log(row)
        // this.getTableData()
        this.$message.success('操作成功')
        row.state = row.state === 1 ? 0 : 1
      } catch (error) {
        this.$message.error('操作失败')
      }
    },
    // 删除目录
    async delRemove (id) {
      try {
        await this.$confirm('此操作将永久删除该目录，是否继续？', {
          type: 'warning'
        })
        await remove({ id })
        this.getTableData()
        this.$message.success('删除成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 修改目录
    async editUpdate (row) {
      try {
        // await update({ id })
        // console.log(row)
        this.permForm = { ...row }
        // this.getTableData()
        this.showDialog = true
      } catch (error) {
        console.log(error)
      }
    },

    // 弹窗的确定按钮
    // async btnOK () {
    //   await this.$refs.permForm.validate()
    //   if (this.permForm.id) {
    //     // 有id是修改
    //     await update(this.permForm)
    //     this.$message.success('修改目录成功')
    //     this.getTableData()
    //   } else {
    //     // 此处分为从不同入口进入时的情况
    //     if (this.subjectsdata.id && this.subjectsdata.name) {
    //       await add({
    //         subjectID: +this.subjects.id,
    //         directoryName: this.permForm.directoryName
    //       })
    //       this.$message.success('新增目录成功')
    //       this.getTableData()
    //     } else {
    //       // 无id是新增
    //       await add(this.permForm)
    //       this.$message.success('新增目录成功')
    //       this.getTableData()
    //     }
    //   }
    //   this.showDialog = false
    // },
    // 弹窗的确定按钮
    async btnOK () {
      await this.$refs.permForm.validate()
      if (this.permForm.id) {
        // 此处分为从不同入口进入时的情况
        // 有id是修改
        await update(this.permForm)
        this.$message.success('修改目录成功')
        this.getTableData()
      } else if (this.subjectsdata.id && this.subjectsdata.name) {
        if (this.permForm.id) {
          await update({
            subjectID: +this.subjectsdata.id,
            directoryName: this.permForm.directoryName
          })
          this.$message.success('修改目录成功')
          this.getTableData()
        } else {
          await add({
            subjectID: +this.subjectsdata.id,
            directoryName: this.permForm.directoryName
          })
          this.$message.success('新增目录成功')
          this.getTableData()
        }
      } else {
        // 此处分为从不同入口进入时的情况
        //   // 无id是新增
        await add(this.permForm)
        this.$message.success('新增目录成功')
        this.getTableData()
        // }
      }
      this.showDialog = false
    },
    // 弹窗的关闭按钮
    btnCancel () {
      this.permForm = {
        subjectName: '',
        directoryName: ''
      }
      this.$refs.permForm.resetFields()
      this.showDialog = false
    },
    // 获取学科简单列表
    async getSubjects () {
      const { data } = await simple()
      // console.log(data)
      this.subjects = data
    }
  }
}
</script>

<style scoped lang='scss'>
.container-directorys {
  padding: 10px 15px 0px;
  .t {
    margin-top: 20px;
  }
  .pager {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
  }
  .el-link {
    margin-right: 10px;
  }
  .breadcrumba {
    margin-bottom: 15px;
  }
  .colright {
    float: right;
    height: 35px;
    margin-left: 10px;
  }
}
</style>
